import React from 'react';
import { Input, Button, List } from 'antd';

const TodoListUi = (props) => {
    return ( 
        <div>
            <div>
                <Input placeholder='input something...' onChange={props.onChange} value={props.inputValue} style={{ width:'250px',marginRight:'10px'}}/>
                <Button type="primary" onClick={props.onClick}>增加</Button>
            </div>
            <div style={{marginTop:'10px',width:'300px'}}>
                <List
                    bordered
                    dataSource={props.list}
                    renderItem={(item,index)=>(<List.Item onClick={() => props.deleteItem(index)}>{item}</List.Item>)}
                />    
            </div>
        </div>
    );
}
 
export default TodoListUi;